<template>
  <div>
    <myDivider name="故障参数"></myDivider>
    <div>
      <el-input class="findValue" v-model="query.recordName" placeholder="故障参数记录名称" @keyup.enter.native="queryParameterList"
        clearable></el-input>

          <el-date-picker
            v-model="query.recordStartTime"
            type="datetime" style="margin-left: 20px;"
            placeholder="记录开始日期时间">
          </el-date-picker>
          <el-date-picker
            v-model="query.recordEndTime"
            type="datetime" style="margin-left:20px;"
            placeholder="记录结束日期时间">
          </el-date-picker>
      
      <el-button type="primary" style="margin-top: 20px; margin-left: 15px" icon="el-icon-search"
        @click="queryParameterList">搜索</el-button>
      <div class="operation">
        <el-button type="success" icon="el-icon-plus" @click="openForm">新增</el-button>
      </div>
    </div>


    <div>
      <el-table :data="parameterRecordData" style="width: 100%" class="menuTable" row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">

        <el-table-column prop="recordName" label="记录名称">
        </el-table-column>

        <el-table-column prop="deviceName" label="关联设备">
        </el-table-column>


        <el-table-column prop="devicePosition" label="资产位置">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.positionName" placement="top-start">
              <span>{{ scope.row.positionName == null || scope.row.positionName == '' ? '—' :
                scope.row.positionName.length > 8 ?
                  "..." + scope.row.positionName.substring(scope.row.positionName.length - 8,
                    scope.row.positionName.length) : scope.row.positionName }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column prop="description" label="故障描述">
        </el-table-column>

        <el-table-column prop="parameterDetail" label="参数详情">
        </el-table-column>

        <el-table-column prop="recordTime" label="记录时间">
          <template slot-scope="scope">
            {{timeFormat(scope.row.recordTime)}}
          </template>
        </el-table-column>


        <el-table-column label="操作" width="130px" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="echoValueForUpdate(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="confirmToDelete(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>

    <div class="pageFooterFather">
      <el-pagination v-if="totalSize > pageSize" background layout="prev, pager, next" :total="totalSize"  @current-change="handleCurrentChange" 
        class="pageFooter">
      </el-pagination>
    </div>
  </div>
</template>

<style scoped>
.menuTable {
  margin-top: 100px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.menuTable .cell {
  text-align: center;
}

.findValue {
  width: 13%;
  margin-top: 20px;
  margin-left: 15px;
}

.operation {
  margin-right: 50px;
  float: right;
  margin-top: 20px;
}

.formStyle {
  width: 1300px;
  margin: 20px auto;
}

.formItemStyle {
  margin-bottom: 22px;
  margin-left: 22px;
}

.pageFooter {
  margin-top: 3%;
  margin-left: 40%;
}

.pageFooterFather {
  top: 84%;
  position: relative;
  width: 100%;
}

.el-cascader-menu {
  height: fit-content;
  width: fit-content;
}
</style>



<script>
import {
  getParameterList,
  deleteParameter,
} from "./parameter.js";
import {timeF } from "@/utils/utils.js";



export default {
  data() {
    return {
      parameterRecordData: [], //用户数据
      fatherDepmentManageData: [],
      query: {
        //左上角查询input
        recordName:"",
        recordStartTime: "",
        recordEndTime: "",
      },
      pageNum: 0,
      pageSize: 10,
      totalSize: 0,
      startTimeValue: '',
      endTimeValue: '',
    };
  },
  activated() {
      //页面数据初始化
      getParameterList().then((res) => {
        this.parameterRecordData = res.data;
        this.pageNum = res.pageNum;
        this.pageSize = res.pageSize;
        this.totalSize = res.total;
      });

  },

  methods: {
    //跳转新增设备页面
    openForm() {
      this.$router.push({path: '/parameter/parameterInsert'});
    },
    //按条件查询设备列表
    queryParameterList() {
      getParameterList(
        this.query.recordName,
        timeF(this.query.recordStartTime),
        timeF(this.query.recordEndTime),
        this.pageNum,
        this.pageSize
      ).then((res) => {
        console.log(res)
        if (res.code==200) {
            if (res.data!=null) {
            this.parameterRecordData = res.data;
          }
          this.pageNum = res.pageNum;
          this.pageSize = res.pageSize;
          this.totalSize = res.total;
        }else{
          this.$message({
            message: res.message,
            type: "warning",
          });
        }

      });
    },

    deleteParameterById(id) {

      //先去请求部门下是否有用户
      deleteParameter(id).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.queryParameterList();
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      })
    },

    confirmToDelete(row) {
      var id = row.id;
      this.$confirm("是否确认删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.deleteParameterById(id);
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
        return;
      });
    },

    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.queryParameterList();
    },

    echoValueForUpdate(row){
      var id = row.id;
      this.$router.push({path: '/parameter/parameterInsert',query: {id: id, operateType:'update'}})
    },
    timeFormat(time){
      return timeF(time);
    }

  

  }
};
</script>